<template lang="pug">
  .container
    .lession__detail__tabs
      router-link(to="/teacher/lession") 导学详情
      router-link(to="test", append) 测验题目
      a(href="") 看他人笔记
      a(href="") 逐题分析
    .row
      .col-sm-3
        side
      .col-sm-9
        .lession__detail__video
          h2 一元二次方程二次函数
          .video
        .lession__detail__note
          .lession__detail__note__hd
            h2 学生笔记
            select.form-control(v-model="classes.selected")
              option(v-for="item in classes.list", :value="item.classId") {{item.className}}
            .lession__note__expand
          .lession__detail__note__bd
            .split
            .note__card__list
              .note__card(v-for="item in notes")
                h5 {{item.studentName}}
                .note__card__content
                  span.ts {{item.createdTime}}
                  p {{item.noteContent}}
</template>
<style lang="scss">
.lession__detail__video {
  border-radius: 10px;
  background-color: #fafafa;
  padding: 15px;
  .video {
    height: 474px;
    background: #eee;
  }
  h2 {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
  }
}
.lession__detail__note {
  margin-top: 20px;
}
.lession__detail__note__hd {
  padding: 0 35px;
  background: #fafafa;
  border-radius: 10px;
  @include clearfix();
  h2 {
    float: left;
    margin: 0;
    margin-right: 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 46px;
  }
  .form-control {
    float: left;
    width: 120px;
    padding-top: 3px;
    padding-bottom: 3px;
    height: auto!important;
    margin-top: (46-24)/2 + px;
    font-size: 12px;
  }
}
.lession__note__expand {
  float: right;
  margin-top: (46-8)/2 + px;
  width: 8px;
  height: 14px;
  background: url('/images/icon_open_normal.png') no-repeat 100%;
}
.lession__detail__note__bd {
  background: #fafafa;
  .note__card__list {
    border-radius: 0;
  }
  .split {
    margin: 0 24px;
    border-top: 1px solid #ececec;
  }
}
</style>

<script>
import api from 'api/teacher/lession'
import side from './side.vue'
export default {
  data () {
    return {
      notes: [],
      classes: {
        selected: '',
        list: []
      }
    }
  },
  created () {
    this.getClass()
    this.getNotes()
  },
  methods: {
    getClass () {
      api.getClass('144730013592190976').then((response) => {
        this.classes.list = [{
          classId: '',
          className: '全部班级'
        }].concat(response.data.data)
      })
    },
    getNotes () {
      api.getStudentNote({
        previewvideoid: '123533667250208768',
        classid: '2222',
        from: 0,
        size: 10
      }).then((response) => {
        this.notes = response.data.data.notes
      })
    },
    knowledge () {
      this.$store.commit('show', 'knowledge')
    }
  },
  components: {
    side
  }
}
</script>

